<template>
  <view class="change-password-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <uv-icon name="arrow-left" size="20" color="#333"></uv-icon>
        </view>
        <view class="navbar-title">修改密码</view>
        <view class="navbar-right"></view>
      </view>
    </view>

    <view class="password-content">
      <!-- 顶部装饰 -->
      <view class="header-decoration">
        <view class="decoration-circle decoration-circle-1"></view>
        <view class="decoration-circle decoration-circle-2"></view>
      </view>

      <!-- 表单卡片 -->
      <view class="form-card">
        <!-- 提示信息 -->
        <view class="tips-card">
          <uv-icon name="info-circle-fill" size="20" color="#00d4aa"></uv-icon>
          <text class="tips-text">密码长度为6-20位，支持字母、数字和特殊字符</text>
        </view>

        <!-- 旧密码 -->
        <view class="form-item">
          <view class="item-label-row">
            <uv-icon name="lock" size="18" color="#00d4aa"></uv-icon>
            <text class="item-label">旧密码</text>
          </view>
          <uv-input
            v-model="oldPassword"
            :password="!showOldPassword"
            placeholder="请输入旧密码"
            maxlength="20"
            border="none"
            :custom-style="{
              backgroundColor: '#f7f8fa',
              padding: '24rpx',
              borderRadius: '12rpx',
              fontSize: '28rpx'
            }"
          >
            <template #suffix>
              <view class="eye-icon" @click="showOldPassword = !showOldPassword">
                <uv-icon
                  :name="showOldPassword ? 'eye' : 'eye-off'"
                  size="20"
                  color="#999"
                ></uv-icon>
              </view>
            </template>
          </uv-input>
        </view>

        <!-- 新密码 -->
        <view class="form-item">
          <view class="item-label-row">
            <uv-icon name="lock-fill" size="18" color="#00d4aa"></uv-icon>
            <text class="item-label">新密码</text>
          </view>
          <uv-input
            v-model="newPassword"
            :password="!showNewPassword"
            placeholder="请输入新密码"
            maxlength="20"
            border="none"
            :custom-style="{
              backgroundColor: '#f7f8fa',
              padding: '24rpx',
              borderRadius: '12rpx',
              fontSize: '28rpx'
            }"
          >
            <template #suffix>
              <view class="eye-icon" @click="showNewPassword = !showNewPassword">
                <uv-icon
                  :name="showNewPassword ? 'eye' : 'eye-off'"
                  size="20"
                  color="#999"
                ></uv-icon>
              </view>
            </template>
          </uv-input>
        </view>

        <!-- 确认新密码 -->
        <view class="form-item">
          <view class="item-label-row">
            <uv-icon name="checkmark-circle" size="18" color="#00d4aa"></uv-icon>
            <text class="item-label">确认新密码</text>
          </view>
          <uv-input
            v-model="confirmPassword"
            :password="!showConfirmPassword"
            placeholder="请再次输入新密码"
            maxlength="20"
            border="none"
            :custom-style="{
              backgroundColor: '#f7f8fa',
              padding: '24rpx',
              borderRadius: '12rpx',
              fontSize: '28rpx'
            }"
          >
            <template #suffix>
              <view class="eye-icon" @click="showConfirmPassword = !showConfirmPassword">
                <uv-icon
                  :name="showConfirmPassword ? 'eye' : 'eye-off'"
                  size="20"
                  color="#999"
                ></uv-icon>
              </view>
            </template>
          </uv-input>
        </view>

        <!-- 密码强度提示 -->
        <view class="password-strength" v-if="newPassword">
          <view class="strength-header">
            <text class="strength-label">密码强度</text>
            <text class="strength-text" :class="`strength-${strengthLevel}`">
              {{ strengthLevel === 'weak' ? '弱' : strengthLevel === 'medium' ? '中' : '强' }}
            </text>
          </view>
          <view class="strength-bars">
            <view
              class="strength-bar"
              :class="{
                'weak': passwordStrength >= 1,
                'medium': passwordStrength >= 2,
                'strong': passwordStrength >= 3
              }"
            ></view>
            <view
              class="strength-bar"
              :class="{
                'medium': passwordStrength >= 2,
                'strong': passwordStrength >= 3
              }"
            ></view>
            <view
              class="strength-bar"
              :class="{ 'strong': passwordStrength >= 3 }"
            ></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn-wrapper">
      <view 
        class="submit-btn" 
        :class="{ disabled: submitting }"
        @click="submitPassword"
      >
        <text class="submit-btn-text">{{ submitting ? '提交中...' : '确认修改' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { changePassword } from '@/api/auth'

export default {
  name: 'ChangePassword',
  data() {
    return {
      statusBarHeight: 0,
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      showOldPassword: false,
      showNewPassword: false,
      showConfirmPassword: false,
      submitting: false
    }
  },
  computed: {
    /**
     * 密码强度等级 (1-3)
     * 1: 弱 - 只有数字或字母
     * 2: 中 - 数字+字母
     * 3: 强 - 数字+字母+特殊字符
     */
    passwordStrength() {
      if (!this.newPassword) return 0
      
      let strength = 0
      const password = this.newPassword
      
      // 检查是否包含数字
      if (/\d/.test(password)) strength++
      
      // 检查是否包含字母
      if (/[a-zA-Z]/.test(password)) strength++
      
      // 检查是否包含特殊字符
      if (/[!@#$%^&*]/.test(password)) strength++
      
      return strength
    },
    
    /**
     * 密码强度文本
     */
    strengthLevel() {
      if (this.passwordStrength === 1) return 'weak'
      if (this.passwordStrength === 2) return 'medium'
      if (this.passwordStrength >= 3) return 'strong'
      return 'weak'
    }
  },
  created() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0
  },
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack()
    },

    /**
     * 验证密码格式
     * @param {string} password - 密码
     * @returns {boolean} 是否符合格式
     */
    validatePassword(password) {
      const passwordRegex = /^[a-zA-Z0-9!@#$%^&*]{6,20}$/
      return passwordRegex.test(password)
    },

    /**
     * 提交密码修改
     */
    async submitPassword() {
      // 验证旧密码
      if (!this.oldPassword) {
        uni.showToast({
          title: '请输入旧密码',
          icon: 'none'
        })
        return
      }

      // 验证新密码
      if (!this.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return
      }

      // 验证新密码格式
      if (!this.validatePassword(this.newPassword)) {
        uni.showToast({
          title: '密码格式不正确，长度为6-20位',
          icon: 'none',
          duration: 2000
        })
        return
      }

      // 验证确认密码
      if (!this.confirmPassword) {
        uni.showToast({
          title: '请确认新密码',
          icon: 'none'
        })
        return
      }

      // 检查两次密码是否一致
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }

      // 检查新旧密码是否相同
      if (this.oldPassword === this.newPassword) {
        uni.showToast({
          title: '新密码不能与旧密码相同',
          icon: 'none'
        })
        return
      }

      this.submitting = true

      try {
        await changePassword({
          oldPassword: this.oldPassword,
          newPassword: this.newPassword
        })

        this.submitting = false

        uni.showToast({
          title: '修改成功',
          icon: 'none',
          duration: 1500
        })

        // 延迟后清除用户信息并跳转到登录页
        setTimeout(() => {
          this.$store.commit('user/CLEAR_USER_INFO')
          this.$store.commit('token/CLEAR_TOKEN')
          uni.reLaunch({
            url: '/subPages/auth/login'
          })
        }, 1500)

      } catch (error) {
        this.submitting = false
        console.error('修改密码失败:', error)
        
        let errorMessage = '修改失败'
        if (typeof error === 'string') {
          errorMessage = error
        } else if (error.message) {
          errorMessage = error.message
        }

        uni.showToast({
          title: errorMessage,
          icon: 'none',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.change-password-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8fffe 0%, #f7f8fa 30%);
  position: relative;
}

/* 自定义导航栏 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1000;
  border-bottom: 1rpx solid #eee;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16rpx;
}

.navbar-left,
.navbar-right {
  width: 80rpx;
  height: 100%;
  display: flex;
  align-items: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

/* 内容区域 */
.password-content {
  margin-top: calc(44px + var(--status-bar-height));
  padding: 24rpx;
  position: relative;
}

/* 顶部装饰 */
.header-decoration {
  position: absolute;
  top: -80rpx;
  left: 0;
  right: 0;
  height: 200rpx;
  overflow: hidden;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.decoration-circle-1 {
  width: 300rpx;
  height: 300rpx;
  background: linear-gradient(135deg, #00d4aa, #00c299);
  top: -100rpx;
  left: -80rpx;
}

.decoration-circle-2 {
  width: 200rpx;
  height: 200rpx;
  background: linear-gradient(135deg, #00c299, #00b088);
  top: -50rpx;
  right: -60rpx;
}

/* 表单卡片 */
.form-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
}

/* 提示卡片 */
.tips-card {
  display: flex;
  align-items: center;
  padding: 24rpx;
  margin-bottom: 40rpx;
  background: linear-gradient(135deg, #e8fffe, #f0fffc);
  border-radius: 16rpx;
  border: 1rpx solid #c4f5ef;
}

.tips-text {
  flex: 1;
  margin-left: 12rpx;
  font-size: 26rpx;
  color: #00a88e;
  line-height: 1.6;
}

/* 表单项 */
.form-item {
  margin-bottom: 32rpx;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.item-label-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.item-label {
  margin-left: 8rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.eye-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx;
}

/* 密码强度 */
.password-strength {
  margin-top: 40rpx;
  padding: 24rpx;
  background: linear-gradient(135deg, #f7f8fa, #f0f1f3);
  border-radius: 16rpx;
  border: 1rpx solid #e5e7eb;
}

.strength-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.strength-label {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.strength-bars {
  display: flex;
  gap: 12rpx;
}

.strength-bar {
  flex: 1;
  height: 10rpx;
  background-color: #e5e7eb;
  border-radius: 5rpx;
  transition: all 0.3s ease;

  &.weak {
    background: linear-gradient(90deg, #ff6b6b, #ff5252);
  }

  &.medium {
    background: linear-gradient(90deg, #ffa726, #ff9500);
  }

  &.strong {
    background: linear-gradient(90deg, #66bb6a, #00d4aa);
  }
}

.strength-text {
  font-size: 26rpx;
  font-weight: 600;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;

  &.strength-weak {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
  }

  &.strength-medium {
    color: #ffa726;
    background: rgba(255, 167, 38, 0.1);
  }

  &.strength-strong {
    color: #00d4aa;
    background: rgba(0, 212, 170, 0.1);
  }
}

/* 提交按钮 */
.submit-btn-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #00d4aa, #00c299);
  border-radius: 44rpx;
  transition: all 0.3s ease;

  &:active:not(.disabled) {
    transform: scale(0.98);
  }

  &.disabled {
    background: #e0e5eb;
    
    .submit-btn-text {
      color: #999;
    }
  }
}

.submit-btn-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2rpx;
}
</style>

